<template>
    <div>
        <div
            class="goodItem"
            v-for="(item,index) in getGoodList.goodData"
            :key="index"
            @click="checkGood(item)"
        >
            <div class="leftBox">
                <h3 class="goodName">{{item.goodName}}</h3>
                <p class="goodExplan">{{item.goodExplan}}</p>
                <span class="goodPrice">¥<i>{{item.goodPirce}}</i></span>
            </div>
            <div class="rightBox">
                <img
                    :src="item.goodImgSrc"
                    alt=""
                >
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['goodList'],
    data() {
        return {
            getGoodList: this.goodList
        }
    },
    methods: {
        // 点击商品进行跳转
        checkGood(item) {
            this.$router.push({  //核心语句
                path: '/goodDetail',   //跳转的路径
                query: {           //路由传参时push和query搭配使用 ，作用时传递参数
                    item: item,
                }
            })
        },
    },
    mounted() {
    }
}
</script>
<style lang="less" scoped>
.goodItem {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    .leftBox {
        width: 470px;
        .goodName {
            font-size: 28px;
            color: #5a5a5a;
            height: 50px;
            line-height: 50px;
        }
        .goodExplan {
            color: #a8a8a8;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .goodPrice {
            height: 50px;
            line-height: 50px;
            color: #a8a8a8;
            i {
                font-style: normal;
                font-size: 32px;
                color: #299f93;
                display: inline-block;
                vertical-align: top;
            }
        }
    }
    .rightBox {
        width: 200px;
        padding-bottom: 30px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        img {
            width: 100px;
            height: 100px;
        }
    }
}
</style>
